<template>
	<view class="big">
		<view class="top" >
			<view class="tt">
				钱包余额(元)
			</view>
			<view class="tb">
				<view class="tbl">
					<view>可用余额</view>
					<view>{{this.balance}}</view>
				</view>
				<view class="tbl">
					<view>冻结余额</view>
					<view>0.00</view>
				</view>
				<view class="tbl">
					<view>累计消费</view>
					<view>0.00</view>
				</view>
			</view>
		</view>
		<view class="btm">
			<view class="bl">
				<u-icon label="资金记录" labelSize="28rpx" name="rmb" color="rgb(246,205,71)" size="35"></u-icon>
			</view>
			<view class="br">
				>
			</view>
		</view>
	</view>
</template>

<script>
	import {_useramount} from "../../api/mine.js"
	export default {
		data() {
			return {
				balance:""
			}
		},
		methods: {
			get_useramount(){
				_useramount().then(res=>{
					console.log(res)
					this.balance=res.data.balance
				})
			}
		},
		onReady(){
			this.get_useramount()
		}
	}
</script>

<style>
	.big{
		width: 100%;
		height: 100vh;
		background-color: rgb(247,248,250);
	}
	.top{
		width: 96%;
		height: 300rpx;
		margin-left: 2%;
		background-color: rgb(230,175,91);
		background-image: url("https://v-shop.shuzp.top/v2/assets/img/cd2927863946844a21b8684a0c356b3f.4973ef9f.png");
		border-radius: 20rpx;
		background-size: 100% 100%;
		padding-top: 30rpx;
		box-sizing: border-box;
	}
	.tt{
		color: #fff;
		font-size: 50rpx;
		font-weight: 600;
		padding-left: 40rpx;
	}
	.tb{
		display: flex;
		justify-content: space-around;
		text-align: center;
		margin-top: 20rpx;
		width: 100%;
		height: 170rpx;
		box-sizing: border-box;
		padding-top: 40rpx;
	}
	.tbl{
		font-size: 30rpx;
		color: #fff;
		
	}
	.btm{
		width: 96%;
		height: 80rpx;
		margin-left: 2%;
		border-radius: 20rpx;
		margin-top: 40rpx;
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		box-sizing: border-box;	
		line-height: 80rpx;
		font-size: 25rpx;
		padding-right: 20rpx;
	}
	.bl{
		margin-left: 20rpx;
		padding-top: 25rpx;
	}
</style>
